<template>
  <view>
    <view class="chainBox" :style="'padding-bottom:' + (bottomType ? '60' : '80') + 'px'">
      <view class="chainTop">
        <view class="chainTop__content">
          <view class="line">
            <view class="circle"></view>
            <view class="lineOne"></view>
            <view class="LineTwo"></view>
          </view>
          <span style="font-size:16px;">接龙活动</span>
          <view class="line">
            <view class="circle"></view>
            <view class="lineOne"></view>
            <view class="LineTwo"></view>
          </view>
        </view>
      </view>
      <view class="chainDesc">
        <view class="chainDesc__top">
          <span class="name">{{activityDetail.name}}</span>
          <span class="day" v-if="countDetail.status === 'ended'">
            {{activityDetail.stopTime}}
          </span>
        </view>
        <view class="chainDesc__desc">{{activityDetail.content}}</view>
        <view class="chainDesc__img">
          <image :src="activityDetail.coverPoster" alt style="width:100%;height: 170px"></image>
        </view>
      </view>
      <view class="chainBottom">
        <view class="chainBottom__left">
          <span>有{{activityDetail.views}}人看过</span>
          <span>{{activityDetail.userRecords}}人参与</span>
        </view>
        <view class="time__count" v-if="countDetail.status != 'ended'">
          <view class="time__count--text">
            <text>还剩</text>
          </view>
          <u-count-down :time="remainTime" @change="handleChange">
            <view style="display:flex;align-items: center;">
              <view class="time">{{ timeData.hours[0] }}</view>
              <view class="time">{{ timeData.hours[1] }}</view>
              <view class="time" v-if="timeData.hours.length > 2">{{ timeData.hours[2] }}</view>
              <view class="colon">:</view>
              <view class="time">{{ timeData.minutes[0] }}</view>
              <view class="time">{{ timeData.minutes[1] }}</view>
              <view class="colon">:</view>
              <view class="time">{{ timeData.seconds[0] }}</view>
              <view class="time">{{ timeData.seconds[1] }}</view>
            </view>
          </u-count-down>
        </view>
        <view class="chainBottom__status" v-if="countDetail.status === 'aboutToBegin'">距开始</view>
        <view class="chainBottom__status" v-if="countDetail.status === 'beginning'">距结束</view>
        <view class="chainBottom__status" style="background-color: #CCCCCC;" v-if="countDetail.status === 'ended'">
          已结束
        </view>
      </view>
      <view class="listBox" :style="'margin-top:' + '20px'">
        <view v-for="(item, index) in activityList" :key="index" style="background-color: white;" :data-item="item"
          @tap.stop="jumpDetail">
          <view class="listBox__line">
            <view class="listBox__line--image">
              <image :src="item.pic" alt style="width:100%;height:100%"></image>
              <view class="unableIcon" v-if="item.allStock === 0">
                <view class="soldOut">
                  <view>已售罄</view>
                  <view>SoldOut</view>
                </view>
              </view>
            </view>
            <view class="listBox__content">
              <view class="listBox__content--name">{{item.name}}</view>
              <view class="listBox__content--skuName" v-if="item.skuStocks.length>1" :data-item="item"
                @tap.stop="clickSku">
                {{item.actStocks.specs}}
                <u-icon name="arrow-down"></u-icon>
              </view>
              <view class="listBox__content--limit" :style="'margin-top:' + (item.skuStocks.length>1 ? '0px' : '40px')">
                <view class="border" v-if="item.actStocks.perLimit>0">
                  限购{{item.actStocks.perLimit}}件
                </view>
                <view class="border">已售{{item.actStocks.sale}} / 剩余{{ item.actStocks.stock }}件</view>
              </view>
              <view class="listBox__content__price">
                <view style="display:flex;align-items: flex-end;">
                  <view class="price">{{item.actStocks.price}}</view>
                  <view class="originPrice">{{item.actStocks.originalPrice}}</view>
                </view>
                <view style="display:flex;align-items:center;width: 70px;justify-content: space-between;">
                  <view @tap="decrease" :data-item="item">
                    <m-icon name="icongouwuche-jian" size="23px"></m-icon>
                  </view>
                  <view>{{item.actStocks.goodNum}}</view>
                  <view @tap="increase" :data-item="item">
                    <m-icon name="icongouwuche-jia" size="23px" style="color:#FC425A">
                    </m-icon>
                  </view>
                  
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-if="activityList.length===0" class="shopNoCar">
          <!-- <image src="http://medusa-small-file.oss-cn-hangzhou.aliyuncs.com/api/noCar.png" class="shop__noCar" /> -->
          <view class="shop__noCar--text">暂无商品~</view>
        </view>
      </view>
      <!-- <view class="center--middle" style="font-size:14px" bind:tap="clickCopy">点击复制链接 参与接龙</view> -->
      <view v-if="!hasListMore">
        <view class="recodeList" v-if="buyQuery.length>0">
          <view class="recodeList__title">购买记录</view>
          <view v-for="(listItem, index) in buyQuery" :key="index">
            <view class="recodeList__list--item">
              <view style="display:flex;align-items: center;justify-content: space-between">
                <view class="index">{{index+1}}.</view>
                <view class="imgBox">
                  <image :src="listItem.userAvatarUrl" alt style="width:60px; height :60px"></image>
                </view>
                <view>{{listItem.userName}}</view>
                <view class="right">
                  <view>{{listItem.payTime}}</view>
                  <view class="join">我参与的</view>
                </view>
              </view>
              <view class="goodLink">
                <view style="display: flex;margin-left: 20px;padding-top: 16px;width:60px;">产品:</view>
                <view class="recodeList__list">
                  <view v-for="(item, index2) in listItem.itemVoList" :key="index2" style="margin: 5px 0px">
                    <view class="goodName">{{index+1}}. {{item.productName}}</view>
                  </view>
                </view>
              </view>
              <view class="goodLink">
                <view style="width: 70px;display: flex;margin-left: 20px">金额:</view>
                <view style="width:250px">￥{{listItem.payAmount}}</view>
              </view>
              <view class="goodLink">
                <view style="width: 70px;display: flex;margin-left: 20px">联系人:</view>
                <view style="width:250px">
                  {{listItem.receiverName}} {{listItem.receiverPhone}} {{listItem.receiverDetailAddress}}
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="JoinList" v-if="joinList.length>0">
          <view class="JoinList__title">接龙记录</view>
          <view v-for="(joinItem, index) in joinList" :key="index" class="listContent">
            <view class="listContent__top">
              <view class="index">{{index+1}}.</view>
              <image :src="joinItem.userAvatarUrl" alt class="image"></image>
              <view style="margin-right:10px;width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                {{joinItem.userName}}
              </view>
              <view style="font-size:12px">({{joinItem.payTime}})</view>
            </view>
            <view class="listContent__goodList">
              <view v-for="(item, index2) in joinItem.itemVoList" :key="index2">
                <view class="listContent__goodList--box">
                  <view>{{item.productName}}</view>
                  <view>*{{item.productQuantity}}</view>
                </view>
              </view>
            </view>
          </view>
          <view class="center--middle" @tap="showMore">{{hasMore ? '查看更多...' : '没有更多了'}}</view>
        </view>
      </view>
      <view class="bottom" :style="'bottom:' + (bottomType ?'0' : bottomHeight) + 'px'">
        <view class="bottom__left">
          <view class="bottom__left--tip">合计:</view>
          <view class="bottom__left--price">￥{{totalPrice}}</view>
        </view>
        <view class="bottom__account" @tap="submit"
          :style="'background-color:' + (countDetail.status === 'beginning' ? '#fd435b' : '#CCCCCC' )">
          结算({{goodNum}})
        </view>
      </view>
      <u-popup :show="showVisible" mode="bottom" :customStyle="{height:'400px',flex:'auto'}" @close="onClose">
        <!-- 弹窗选择规格 -->
        <view class="skuPop">
          <view class="skuPop__top">
            <image :src="currentItem.actStocks.pic" alt style="width:120px;height:120px"></image>
            <view class="skuPop__top--content">
              <view style="display:flex; width: 100%;align-items:flex-end">
                <view class="price">{{currentItem.actStocks.price}}</view>
                <view class="originalPrice">{{currentItem.actStocks.originalPrice}}</view>
              </view>
              <view class="skuContent">当前所选规格：{{currentItem.actStocks.specs}}</view>
            </view>
          </view>
          <view class="skuPop__text">规格</view>
          <view class="skuPop__popList">
            <view v-for="(item, index) in currentItem.skuStocks" :key="index">
              <view class="skuPop__popList--item"
                style="background-color:#F2F2F2;color:#CDCFD0;border:'1px solid #F2F2F2'" :data-skuItem="item"
                @tap="selectSku" v-if="item.stock === 0">
                {{item.specs}}
              </view>
              <view class="skuPop__popList--item"
                :style="'color:' + (item.isCheck && item.stock>0?'red':'') + '; background-color:' + (item.isCheck?'#F6EBEC':'#F2F2F2') + '; border:' + (item.isCheck ? '1px solid red' : '1px solid #F2F2F2')"
                :data-skuItem="item" @tap="selectSku" v-else>
                {{item.specs}}
              </view>
            </view>
          </view>
        </view>
        <view class="center--middle">
          <view class="sureButton" @tap="onClose">确 定</view>
        </view>
      </u-popup>
    </view>
    <auth :authType="authType" @authClick="authClick"></auth>
  </view>
</template>
<script lang='ts'>
  import {
    Component,
    Mixins
  } from 'vue-property-decorator'
  import {
    getActivityList
  } from "@/api/modules/chain";
  import chain from "@/mixins/chain";
  import auth from '@/components/auth/auth.vue';
  import MIcon from '@/components/m-icon/m-icon.vue';
  @Component({
    components: {
      auth,
      MIcon
    }
  })
  export default class ChainDetail extends Mixins(chain) {
    options: any = {}

    bottomHeight: number = 46

    // 页面周期函数--监听页面加载
    async onLoad(options) {
      this.setData({
        options,
      });
      if (options.transData) {
        await this.$store.dispatch('userStore/login')
        this.getActivity(JSON.parse(options.transData).id);
      } else {
        // this.getActivity(options.id);
        this.getActivityContent();
      }
    }

    getActivityContent() {
        this.setData({
          chooseType: "logistics",
        });
      getActivityList({}).then(res => {
        this.actId = res.id;
        this.getActivity(res.id);
        this.getPosition(1);
        this.getHeight();
      });
    }

    // 页面处理函数--监听用户上拉触底
    onReachBottom() {
      if (this.hasListMore) {
        this.setData({
          "goodQuery.page": this.goodQuery.page + 1,
        });
        this.getListDetail();
      }
    }

    // 页面处理函数--用户点击右上角分享
    onShareAppMessage() {
      let transData = this.$store.state.userStore.userInfo.transData;
      transData.id = this.activityDetail.id;
      transData = JSON.stringify(transData);
      return {
        title: "接龙活动",
        path: `pages/chainDetail/chainDetail?transData=${transData}`,
      };
    }

    authClick(){
      this.authType = false
    }
    onClose(){
      this.showVisible=false
    }
    
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #F8F8F8;
  }

  .chainBox {
    padding: 10px;
    padding-bottom: 60px;
  }

  .line {
    display: flex;
    align-items: center;
  }

  .circle {
    width: 8px;
    height: 8px;
    background-color: #E75E75;
    border-radius: 50px;
  }

  .lineOne {
    width: 8px;
    height: 20px;
    border-radius: 10px;
    background-color: #EEB84E;
    transform: skewX(-35deg);
    margin-left: 8px;
  }

  .LineTwo {
    width: 8px;
    height: 16px;
    border-radius: 10px;
    background-color: #E78159;
    transform: skewX(-35deg);
    margin-left: 8px;
  }

  @include b(chainTop) {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    background-color: white;

    @include e(content) {
      display: flex;
      align-items: center;
      width: 180px;
      justify-content: space-between;
    }
  }

  @include b(chainDesc) {
    padding: 20px 10px 0px 10px;
    background-color: white;

    @include e(top) {
      display: flex;
      justify-content: space-between;

      .name {
        font-size: 18px;
        font-weight: 700;
      }

      .day {
        font-size: 14px;
        color: #bcbcbc;
      }
    }

    @include e(desc) {
      margin-top: 10px;
      color: #868686;
    }

    @include e(img) {
      width: 100%;
      margin-top: 10px;
    }

    @include e(list) {
      margin-top: 10px;

      @include m(content) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 5px;
        font-size: 13px;

        .line {
          display: flex;
          width: 145px;
          justify-content: space-between;
          align-items: center;

          .contentId {
            width: 20px;
            display: flex;
            justify-content: flex-end;
          }

          .img {
            width: 40px;
            height: 40px;
            border-radius: 50px;
          }
        }
      }
    }
  }

  @include b(chainBottom) {
    display: flex;
    padding: 10px;
    margin-top: -5px;
    font-size: 12px;
    justify-content: space-between;
    align-items: center;
    color: #A1A1A1;
    background-color: white;

    @include e(left) {
      width: 140px;
      display: flex;
      justify-content: space-between;
    }

    @include e(status) {
      width: 60px;
      height: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50px;
      font-size: 12px;
      color: white;
      background-color: #F73119;
    }
  }

  .time__count {
    display: flex;
    align-items: center;
  }

  .time__count--text {
    text-align: center;
    margin: 0px 4px;
    color: #A1A1A1;
  }


  .colon {
    margin-left: 4rpx;
    margin-right: 8rpx;
    margin-bottom: 4rpx;
  }

  .time {
    width: 20rpx;
    height: 30rpx;
    margin-right: 4rpx;
    background-color: #000000;
    text-align: center;
    font-size: 22rpx;
    font-family: HiraginoSansGB-W3;
    font-weight: normal;
    color: #fff;
    line-height: 42rpx;
    border-radius: 6rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 1px;
  }

  .selectWay {
    padding: 20px 40px;
    display: flex;
    width: 100%;
    justify-content: space-around;
    align-items: center;

  }


  .selectWay__left {
    color: #FF0000;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 80px;
    height: 30px;
  }

  .selectWay__left--line {
    width: 70rpx;
    height: 10rpx;
    border-radius: 100rpx;
    background-color: #FF0000;
    margin-top: 4px;

  }



  .listBox {
    // padding: 10px 20px;
    // background-color: white;

    &__line {
      display: flex;
      padding: 10px 0px;
      margin-bottom: 10px;
      padding-left: 10px;

      &--image {
        width: 110px;
        height: 110px;
        margin-right: 10px;
        position: relative;

        .unableIcon {
          width: 80px;
          height: 80px;
          border-radius: 50px;
          background-color: rgba(0, 0, 0, 0.3);
          position: absolute;
          left: 15px;
          @include flex(center, center);
          border: 2px solid white;
          top: 20px;
          ;

          .soldOut {
            color: white;
            font-size: 13px;
            display: flex;
            flex-wrap: wrap;
            padding: 4px;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }

    &__content {
      display: flex;
      flex-wrap: wrap;
      width: 210px;
      align-content: space-between;

      &--name {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
      }

      &--skuName {
        padding: 2rpx 10rpx;
        background-color: #FDFDFD;
        border: 2rpx solid #e4e4e4;
        display: -webkit-box;
        display: flex;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
        font-size: 22rpx;
        margin: 10px 0px;
        border-radius: 14rpx;
        color: #A2A2A2;
      }

      &--limit {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .border {
          padding: 10px;
          background-color: #fff3f3;
          color: #ff5050;
          border-radius: 50px;
          height: 20px;
          font-size: 11px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      &__price {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;

        .price {
          color: #fe7787;
          margin-right: 20px;
        }

        .price:before {
          content: "￥";
          color: #fe7787;
        }

        .originPrice {
          color: #a1a1a1;
          text-decoration: line-through;
        }

        .originPrice:before {
          content: "￥";
          color: #a1a1a1;
        }

        .iconClass {
          color: #ff0000;
          font-size: 0.35px;
          margin: 0px 0.2px;
        }
      }
    }
  }

  .bottom {
    position: fixed;
    bottom: 0px;
    height: 50px;
    background-color: white;
    width: 100%;
    left: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &__left {
      margin-left: 20px;
      display: flex;
      align-items: flex-end;
      font-size: 14px;

      &--tip {
        display: flex;
        align-content: flex-end;
      }

      &--price {
        color: #fd435b;
        font-size: 16px;
        margin-left: 10px;
      }
    }

    &__account {
      width: 100px;
      height: 100%;
      background-color: #fd435b;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 18px;
    }
  }

  .skuPop {
    padding: 20px;

    &__top {
      display: flex;
      align-items: flex-end;

      &--content {
        margin-left: 10px;
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 10px;
        font-size: 15px;
        width: 230px;

        .price {
          color: #fa5555;
          font-weight: bold;
          margin-bottom: 5px;
        }

        .price:before {
          content: "￥";
        }

        .originalPrice {
          color: #BBBBBB;
          margin-bottom: 5px;
          margin-left: 14px;
          font-size: 13px;
          text-decoration: line-through;
        }

        .originalPrice:before {
          content: "￥";
        }

        .skuContent {
          font-size: 14px;
        }
      }
    }

    &__text {
      margin: 15px 0px;
      font-size: 16px;
    }

    &__popList {
      height: 140px;
      overflow: auto;
      display: flex;
      flex-wrap: wrap;

      &--item {
        padding: 5px 10px;
        border: 1px solid #f2f2f2;
        margin-right: 20px;
        border-radius: 80px;
        font-size: 13px;
        margin-bottom: 20px;
      }
    }
  }

  .skuPop__popList::-webkit-scrollbar {
    display: none;
  }

  .recodeList {
    background-color: white;
    padding: 20px;

    &__title {
      display: flex;
      justify-content: center;
      font-size: 14px;
      font-weight: bold;
    }

    &__list {
      padding-top: 10px;
      margin-left: 15px;
      width: 250px;

      &--item {
        border-bottom: 1px solid #F8F8F8;
        margin-bottom: 20px;
        padding-bottom: 20px;
        font-size: 14px;

        .index {
          font-size: 12px;
        }

        .imgBox {
          width: 65px;
          height: 65px;
          margin: 0px 10px;
        }

        .right {
          display: flex;
          justify-content: flex-end;
          width: 180px;
          color: #BABABA;

          .join {
            padding-left: 25px;
            color: #17d145;
          }
        }

        .goodName {
          font-size: 14px;
        }

        .goodLink {
          margin: 10px 0px;
          font-size: 14px;
          display: flex;
        }
      }
    }
  }

  .JoinList {
    background-color: white;
    padding: 20px;
    margin-top: 20px;

    &__title {
      display: flex;
      justify-content: center;
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 20px;
    }
  }

  .listContent {
    margin-bottom: 20px;

    &__top {
      display: flex;
      align-items: center;
      border: 1px solid #e4e4e4;
      padding: 18px;
      font-size: 14px;

      .index {
        font-size: 13px;
        margin-right: 10px;
      }

      .image {
        width: 50px;
        height: 50px;
        margin-right: 10px;
      }
    }

    &__goodList {
      border: 1px solid #e4e4e4;
      border-top: none;

      &--box {
        display: flex;
        justify-content: space-between;
        padding: 10px 20px;
        font-size: 14px;
      }
    }

  }

  .center--middle {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .sureButton {
    background-color: #ff0000;
    display: flex;
    position: fixed;
    bottom: 12px;
    width: 80px;
    height: 30px;
    justify-content: center;
    align-items: center;
    color: white;
    border-radius: 50px;
    font-size: 15px;
  }

  .shopNoCar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    height: 10vh;
    background-color: #ffffff;
  }

  .shop__noCar {
    margin-top: 70px;
    width: 69%;
  }

  .shop__noCar--text {
    display: flex;
    justify-content: center;
    color: #acacac;
    width: 100%;
    padding-bottom: 220px;
  }
</style>